<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>文献资源管理系统-成员单位</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="文献资源管理系统-成员单位">
<meta name="description" content="文献资源管理系统-成员单位">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link href="icon/iconfont.css" rel="stylesheet">

</head>
  <style>
    .col-lg-12{
      margin: auto;
    top: 17px;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    }
    .left {
        width: 20%;
        height: 530px;
        border: 1px solid #ccc;
        float:left;
    }
    .right {
        width: 58%;
        height: 530px;
        border: 1px solid #ccc;
        float:left;
    }
    .el-scrollbar .el-scrollbar__wrap {
      overflow-x: hidden;
      }
  </style>
 
<body>
<div class="lyear-layout-web" id="app">
  <div class="lyear-layout-container">
    <!--左侧导航-->

    <!--End 左侧导航-->
    
    <!--头部信息-->
 
    <!--End 头部信息-->
    
    <!--页面主要内容-->

    <main class="lyear-layout-content" >
      <div class="content_wrap" >
       
        <div class="left">
          
          <template>
            <el-scrollbar style="height:100%;"  v-loading="loading" element-loading-text="拼命加载中" >
              <div style="width:700px;height:700px;border:solid;" >
                   
                    <el-tree
					style="width: 40%"
                      :props="defaultProps"
                      :data="data"
                      node-key="id"
                      :default-expand-all="false"
                      :expand-on-click-node="false"
                      @node-click="handleNodeClick">

                      <span class="custom-tree-node" slot-scope="{node, data}">

                        <span><i class="iconfont iconyezi" ></i>   {{ node.label }}</span> 
                      </span>

                    </el-tree>
             </div>
          </el-scrollbar>
        </template>
         
        </div>
    
        <div class="right">
          <!-- <div class="card"> -->
            <div class="card-header"><h4>基本信息</h4></div>
            <div class="card-body">
              
              <form action="lyear_forms_elements.html" method="post" onsubmit="return false;">
                <div class="form-group">
                  <label for="example-nf-email">单位名称</label>
                  <input class="form-control" type="email" id="example-nf-email" v-model="organ.name"  placeholder="请输入单位名称">
                </div>
                <div class="form-group">
                   <a class="btn btn-success m-r-5" type="warning" data-toggle="modal" data-target="#myModal3" ><i class="mdi mdi-pencil" ></i> 编辑</a>
                  <a class="btn btn-primary m-r-5" type="warning" @click="organadd()"><i class="mdi mdi-check"></i> 提交</a>
                  <a class="btn btn-danger" type="warning" @click="organdel()" ><i class="mdi mdi-window-close"></i> 删除</a>
                 
                 </div>  
                
              </form>
              
            </div>
          <!-- </div> -->
        </div>
    </div>
  
    </main>
    <!--End 页面主要内容-->

     <!-- 单位编辑模态框（Modal） -->
   <form action=""  class="form-horizontal" role="form">
    <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">
                      单位编辑
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                </div>
                <div class="modal-body" style="height: 100%;">
                      <div class="form-group">
                        <label for="lastname" class="col-sm-3 control-label">机构代码</label>
                        <div class="col-sm-7">
                          <input class="form-control" type="text" v-model="organ.organCode" placeholder="机构代码">
                        </div>
                    </div>
                      <div class="form-group">
                        <label for="lastname" class="col-sm-3 control-label">机构名称</label>
                        <div class="col-sm-7">
                          <input class="form-control" type="text" v-model="organ.name" placeholder="机构名称">
                        </div>
                    </div>
                    
                    <div class="form-group">
                      <label for="lastname" class="col-sm-3 control-label">编码</label>
                      <div class="col-sm-7">
                        <input class="form-control" type="text" v-model="organ.treeLevel" placeholder="编码">
                      </div>
                  </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <el-button id="button" data-dismiss="modal"  class="btn btn-primary" type="primary"  @click="organupdate()" >提交</el-button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
  </form>
  </div>
</div>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>

<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>

<script src="https://cdn.bootcss.com/zTree.v3/3.5.40/js/jquery.ztree.core.min.js"></script>
<script src="https://cdn.bootcss.com/zTree.v3/3.5.40/js/jquery.ztree.excheck.min.js"></script>
<link href="https://cdn.bootcss.com/zTree.v3/3.5.40/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
    
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="module">
new Vue({
        el:"#app",
        data() {
            return {
                data: [],
                organ:{},
                loading: false,
                defaultProps: {
                    children: 'children',
                    label: 'name'
                   
                }
            }
        },
        created() {
            this.getlist();

        },
        methods: {
         
            getlist() {
              this.loading = true;
              setTimeout(() => {
              this.loading = false;
              axios.get("http://29n01o8660.oicp.vip/server/findorgantree").then(res => {

                   this.arraytotree(res.data);
                    
                }).catch(res => {

                })
              }, 2000);
            },
            handleNodeClick(data) {
              this.organ = data;
              window.localStorage.setItem("id",this.organ.id);
              // alert(this.organ.id)
              console.log(data);
            },
            //数组转化为树
            arraytotree(arr) {
              console.log(arr)
             
                var top = [], sub = [], tempObj = {};
                
                arr.forEach(function (item) {
                 
                    if (item.pId=="0") { // 顶级分类
                        top.push(item)
                        
                    } else {
                        sub.push(item) // 其他分类
                    }
                    item.children = []; // 默然添加children属性
                   
                     tempObj[item.id] = item // 用当前分类的id做key，存储在tempObj中
                   
                })

                sub.forEach(function (item) {
                  
                    // 取父级
                    var parent = tempObj[item.pId] || {'children': []}
                   
                    // 把当前分类加入到父级的children中
                    parent.children.push(item)
                    
                })
                // alert(JSON.stringify(top))
                this.data = top;
                return top
               
            },

            organupdate(){
              this.organid = window.localStorage.getItem("id");
              axios.post("http://29n01o8660.oicp.vip/server/organupdate",this.organ)
              .then(res => {
                this.loading = true;
                setTimeout(() => {
                this.loading = false;

                    this.$message({
                    message: '恭喜你，修改成功',
                    type: 'success'
                    });

                }, 2000);
                this.organ={};
                this.getlist();
                console.log(res)
              })
              .catch(err => {
                console.error(err); 
              })
            },
            organadd(){
              this.organid = window.localStorage.getItem("id");
              axios.post("http://29n01o8660.oicp.vip/server/organadd",this.organ)
              .then(res => {
                this.loading = true;
                setTimeout(() => {
                this.loading = false;

                    this.$message({
                    message: '恭喜你，添加成功',
                    type: 'success'
                    });

                }, 2000);
                this.organ={};
                this.getlist();
                console.log(res)
              })
              .catch(err => {
                console.error(err); 
              })
            },
            organdel(){
              this.organid = window.localStorage.getItem("id");
              axios.delete("http://29n01o8660.oicp.vip/server/organdel/"+this.organid)
              .then(res => {
                this.loading = true;
                setTimeout(() => {
                this.loading = false;
                    this.$message({
                    message: '恭喜你，删除成功',
                    type: 'success'
                    });

                  }, 2000);
                this.organ={};
                this.getlist();
                console.log(res)
              })
              .catch(err => {
                console.error(err); 
              })
            }
        }
    })
  </script>
</body>
</html>